<template>
  <div>
    <h2>库存容量列表</h2>
    <br />

    <div style="display: flex; align-items: center">
      仓库:<el-select v-model="name" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.name"
        >
        </el-option>
      </el-select>
      <el-button type="primary" @click="GetInventoryCapacityList()"
        >查询</el-button
      >
      <el-button type="success" @click="exportListToExcel(multipleSelection)"
        >导出</el-button
      >
    </div>
    <br />
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      border="1"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="locationCode" label="库位编号"> </el-table-column>
      <el-table-column prop="locationName" label="库位名称"> </el-table-column>
      <el-table-column prop="locationType" label="库位类型"> </el-table-column>
      <el-table-column prop="name" label="仓库"> </el-table-column>
      <el-table-column prop="inventory" label="库存数"> </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageIndex"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import XLSX from "xlsx";
import {
  GetInventoryCapacityList,
  BindWarehouse,
} from "@/api/StatementMange/InventoryCapacity";
export default {
  data() {
    return {
      tableData: [],
      name: "" || null,
      pageIndex: 1,
      pageSize: 5,
      totalCount: 0,
      pageCount: 0,
      options: [],
      multipleSelection: [],
    };
  },
  created() {
    this.BindWarehouse();
    this.GetInventoryCapacityList();
  },
  //计算属性
  computed: {
    sid() {
      var sid = [];
      this.multipleSelection.forEach((item) => {
        sid.push(item.id);
      });
      return sid;
    },
  },
  methods: {
    GetInventoryCapacityList() {
      var params = {
        name: this.name,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      };
      GetInventoryCapacityList(params).then((res) => {
        this.tableData = res.data.data;
        this.totalCount = res.data.totalCount;
        this.pageCount = res.data.pageCount;
      });
    },
    BindWarehouse() {
      BindWarehouse().then((res) => {
        this.options = res.data.data;
      });
    },
    //获取列表序号
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection);
    },
    //导出
    exportListToExcel(multipleSelection) {
      // 过滤需要导出的字段
      const filteredData = multipleSelection.map((item) => {
        return {
          库位编号: item.locationCode,
          库位名称: item.locationName,
          库位类型: item.locationType,
          仓库: item.name,
          库存数: item.inventory,
        };
      });
      const worksheet = XLSX.utils.json_to_sheet(filteredData);
      //设置表格宽度
      worksheet["!cols"] = [
        { width: 10 },
        { width: 15 },
        { width: 15 },
        { width: 20 },
        { width: 15 },
      ];

      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
      // 导出Excel文件
      XLSX.writeFile(workbook, "设备类型.xlsx");
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.GetInventoryCapacityList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageIndex = val;
      this.GetInventoryCapacityList();
    },
  },
};
</script>

<style>
</style>